<template>
  <view class="page">
    <!-- 背景图片 -->
    <image
        src="/static/bg11.jpg"
        mode="aspectFill"
        class="bg-image">
    </image>

    <!-- 修改点：添加scroll-y属性并调整容器高度计算 -->
    <scroll-view class="scroll-container" scroll-y>
      <view :class="['white-box', {
        'transparent-bg': 
          formData.preliminaryReview != '3' || 
          (formData.preliminaryReview == '3' && formData.firstReview == '1' && formData.finalReview == '1') ||
          (formData.preliminaryReview == '3' && formData.firstReview == '2' && formData.finalReview == '1') ||
          (formData.preliminaryReview == '3' && formData.firstReview == '3' && formData.finalReview == '2')
      }]">
        <view v-if="formData.preliminaryReview!='3'" class="full-center-container">
          <text class="title center-text full-center-text">您提交的作品在审核中，请耐心等待</text>
        </view>
        <view v-if="formData.preliminaryReview=='3' && formData.firstReview=='1'  && formData.finalReview=='1'" class="full-center-container">
          <text class="title center-text full-center-text">您提交的作品在初评中</text>
        </view>
        <view v-if="formData.preliminaryReview=='3' && formData.firstReview=='2'  && formData.finalReview=='1'" class="full-center-container">
          <text class="title center-text full-center-text">您提交的作品末通过初评， 感谢您的参与！</text>
        </view>
        <view v-if="formData.preliminaryReview=='3' && formData.firstReview=='3'  && formData.finalReview=='1'">
          <text class="title">初评结果</text>
          <view class="status-table">
            <view class="table-row">
              <view class="table-cell">作品状态</view>
              <view class="table-cell">入围</view>
              <view class="table-cell">
                <span @click="showDownloadPopup" style="background-color: #004AAC; color: #ffffff; padding: 10rpx 18rpx;
              display: inline-block; text-align: center; border-radius: 25rpx; font-weight: bold;
              min-width: 160rpx; box-sizing: border-box; cursor: pointer;">
              下载报名列表👆
              </span></view>
            </view>
          </view>
          <view v-if="fileList && fileList.length > 0">
            <view v-for="(item, index) in fileList" :key="index">
              <image
                  :src="item.url"
                  class="work-image"
                  mode="aspectFit"
              />
            </view>
          </view>
          <!-- 作品信息 -->
          <view style="display: flex; flex-direction: column; align-items: center;">
            <view class="center-content">
              <text class="work-title">{{ formData.workName }}</text>
              <text class="author">：{{ formData.name }}</text>
            </view>
          </view>
          <view style="display: flex; flex-direction: column; align-items: flex-start;">
            <!-- 添加注意事项-->
            <view class="left-content">
              <text class="author" style=" text-align:left;">注意事项</text>
            </view>
            <view class="left-content">
              <text class="author">{{ formData.remark }}</text>
            </view>
          </view>
        </view>

        <view v-if="formData.preliminaryReview=='3' && formData.firstReview=='3' && formData.finalReview=='2'" class="full-center-container">
          <text class="title center-text full-center-text ">很遗憾，您提交的作品末能通过复评</text>
        </view>
        <view v-if="formData.preliminaryReview=='3' && formData.firstReview=='3' && formData.finalReview=='3'">
          <text class="title">复评结果</text>
          <view class="status-table">
            <view class="table-row">
              <view class="table-cell">作品状态</view>
              <view class="table-cell">一等奖</view>
            </view>
          </view>
          <view v-if="fileList && fileList.length > 0">
            <view v-for="(item, index) in fileList" :key="index">
              <image
                  :src="item.url"
                  class="work-image"
                  mode="aspectFit"
              />
            </view>
          </view>
          <!-- 作品信息 -->
          <view style="display: flex; flex-direction: column; align-items: center;">
            <view class="center-content">
              <text class="work-title">{{ formData.workName }}</text>
              <text class="author">：{{ formData.name }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view>
      <text class="next-btn" @click="backHome">返回</text>
      <image class="cloud-image"
             src="/static/images/yunduo.png"  ></image>
    </view>
    
    <!-- 下载报名列表弹出框 -->
    <uni-popup ref="downloadPopup" type="center" :mask-close="false">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">下载报名列表</text>
        </view>
        <view class="popup-body">
          <view class="input-group">
            <text class="input-label">邮箱地址</text>
            <input 
              v-model="emailForm.email" 
              type="text" 
              placeholder="请输入邮箱地址" 
              class="email-input"
              placeholder-style="color: #999;"
            />
          </view>
        </view>
        <view class="popup-footer">
          <button class="cancel-btn" @click="closeDownloadPopup">取消</button>
          <button class="confirm-btn" @click="confirmDownload">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>

import config from "@/config";
import {getInfo, sendEmail} from "@/api/activity/activity";

export default {
  data() {
    return {
      placeholderStyle: "color:#999; text-align:left;",
      formData: {
        id: null,
        name: '',
        idNumber: '',
        address: '',
        school: '',
        grade: '',
        competitionGroup: '',
        teacher: '',
        width: '',
        height: '',
        workType: '',
        otherWorkType: '',
        parentName: '',
        parentPhone: '',
        activityId: ''
      },
      imageStyles: {
        width: 80,
        height: 80,
        border: {
          color: '#D4AF37',
          width: '1px',
          style: 'solid'
        }
      },
      fileList: [],
      emailForm: {
        email: ''
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      const id = decodeURIComponent(options.id);
      getInfo(id).then(res => {
        this.formData = {...this.formData, ...res.data};
        const baseUrl = config.baseUrl;
        if (this.formData.thumbnail) {
          this.formData.thumbnails=this.formData.thumbnail.split(',')
          this.fileList = this.formData.thumbnail.split(',').map(url => ({
            url: `${baseUrl}${url}`
          }));
        } else {
          this.fileList = [];
        }
      })
    }
  },
  computed: {},
  methods: {
    backHome() {
      setTimeout(() => {
        uni.navigateBack({ delta: 1 });
      }, 500);
    },
    
    // 显示下载弹出框
    showDownloadPopup() {
      this.$refs.downloadPopup.open();
    },
    
    // 关闭下载弹出框
    closeDownloadPopup() {
      this.emailForm.email = ''; // 清空邮箱
      this.$refs.downloadPopup.close();
    },
    
    // 确认下载
    async confirmDownload() {
      // 验证邮箱格式
      if (!this.emailForm.email) {
        uni.showToast({
          title: '请输入邮箱地址',
          icon: 'none'
        });
        return;
      }
      
      // 简单的邮箱格式验证
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(this.emailForm.email)) {
        uni.showToast({
          title: '邮箱格式不正确',
          icon: 'none'
        });
        return;
      }
      
      try {
        // 显示加载中
        uni.showLoading({
          title: '发送中...'
        });
        
        // 调用API发送邮箱地址到后端
        await sendEmail({
          email: this.emailForm.email,
          id:  this.formData.activityId
        });
        
        // 隐藏加载中
        uni.hideLoading();
        
        // 显示成功提示
        uni.showToast({
          title: '发送成功！报名列表将发送到您的邮箱',
          icon: 'success',
          duration: 2000
        });
        
        // 关闭弹出框
        this.closeDownloadPopup();
        
      } catch (error) {
        // 隐藏加载中
        uni.hideLoading();
        
        // 显示错误提示
        uni.showToast({
          title: error.message || '发送失败，请稍后重试',
          icon: 'none',
          duration: 2000
        });
        
        console.error('发送邮件失败:', error);
      }
    }
  }
}
</script>

<style>
/* 基础样式 */
.page {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 让背景在底层 */
}

/* 修改点：调整高度计算逻辑 */
.scroll-container {
  position: relative;
  z-index: 1;
  height: calc(100vh - 600rpx); /* 减去顶部margin空间 */
  width: 100%;
  margin-top: 460rpx;
  overflow-y: auto;
}

.white-box {
  width: 90vw;
  max-width: 800px;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
}

.white-box.transparent-bg {
  background-color: transparent;
  box-shadow: none;
}
@font-face {
  font-family: 'minikt';
  src: url('@/static/font/minikt.TTF') format('truetype');
}

.title {
  color: #ff0000;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  display: block;
  margin-bottom: 30px;
}

/* 添加居中显示的文本样式 */
.center-text {
  text-align: center;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

/* 添加全屏居中容器样式 */
.full-center-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.full-center-text {
  color: #ff0000;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
  padding: 30rpx 40rpx;
  display: block;
  line-height: 1.4;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 80%;
  min-width: 300rpx;
}

 

.next-btn {
  position: absolute;
  bottom: 50rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3; /* 确保按钮在上层 */
  color: #004AAC;
  font-size: 50rpx;
  font-family: 'minikt', sans-serif;
  text-align: center;
  display: block;
  padding: 10px 20px;
  border-radius: 10px;
}

.cloud-image {
  position: absolute;
  bottom: -40rpx;
  left: 50%;
  transform: translateX(-48%);
  width: 450rpx; /* 调整宽度为600rpx */
  height: 250rpx;
  z-index: 2; /* 确保图片在下层 */
  opacity: 1; /* 添加透明度，使白云图案与背景图融合 */
}


.status-card {
  display: flex;
  background: #f8f8f8;
  border-radius: 16rpx;
  padding: 30rpx;
  border: 2rpx solid #850495;
  margin-bottom: 40rpx;
  .status-label {
    font-size: 28rpx;
    color: #666;
    display: block;
    margin-bottom: 20rpx;
  }
  .status-value {
    color: #09BE4F;
    font-size: 28rpx;
    font-weight: bold;
  }
}

.status-table {
  background: #f8f8f8;
  border-radius: 16rpx;
  border: 2rpx solid #850495;
  margin-bottom: 40rpx;
  overflow: hidden;
}

.table-row {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.table-cell {
  padding: 30rpx 20rpx;
  font-size: 28rpx;
  text-align: center;
  border-right: 1rpx solid #850495;
  display: table-cell;
  vertical-align: middle;
  min-height: 100rpx;
  line-height: normal;
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-cell:first-child {
  width: 25%;
}

.table-cell:nth-child(2) {
  width: 20%;
}

.table-cell:nth-child(3) {
  font-size: 26rpx;
  width: 55%;
}

.table-cell:last-child {
  border-right: none;
}

.table-cell:first-child {
  color: #666;
  font-weight: normal;
}

.table-cell:nth-child(2){
  color: #09BE4F;
  font-weight: bold;
}

.table-cell:nth-child(3) {
  width: 50%;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.3;
  font-weight: bold;
  border-radius: 8rpx;
  padding: 25rpx 15rpx;
  min-height: 80rpx;
  box-sizing: border-box;
}

/* 弹出框样式 */
.popup-content {
  width: 600rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.15);
}

.popup-header {
  background-color: #004AAC;
  padding: 30rpx;
  text-align: center;
}

.popup-title {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
}

.popup-body {
  padding: 40rpx 30rpx;
}

.input-group {
  margin-bottom: 20rpx;
}

.input-label {
  display: block;
  color: #333;
  font-size: 28rpx;
  margin-bottom: 15rpx;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
}

.email-input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #ddd;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  background-color: #f9f9f9;
}

.email-input:focus {
  border-color: #004AAC;
  background-color: #ffffff;
}

.popup-footer {
  display: flex;
  border-top: 1rpx solid #eee;
}

.cancel-btn, .confirm-btn {
  flex: 1;
  height: 90rpx;
  border: none;
  font-size: 30rpx;
  font-weight: bold;
  background-color: transparent;
}

.cancel-btn {
  color: #666;
  border-right: 1rpx solid #eee;
}

.cancel-btn:active {
  background-color: #f5f5f5;
}

.confirm-btn {
  color: #004AAC;
}

.confirm-btn:active {
  background-color: #f0f7ff;
}


</style>